再啃 javascript 高级程序

第二章：

1、为了避免页面出现延迟时的空白，把js放在body元素中页面内容的后面。

2、延迟脚步的方法：

（1）defer
（2）async
（3）动态创建<script>标签
（4）ajax

3、引入外部文件的优点：

（1）增加可维护性
（2）可缓存，加快页面加载速度
（3）适应未来

第三章：基本概念

1、js中一起都区分大小写。

2、标示符（变量，函数，属性）的规则：

（1）第一个字母必须是一个字母，下划线，或者一个美元符号
（2）其他字符可以是字母，下划线，美元符号，或者数组

3、严格模式的定义和作用。

定义：它定义了一种不同的解析和执行模型。
作用：
（1）不确定的行为将得到处理
（2）对某些不安全的操作会抛出错误

4、建议语句结尾的分号要加上。

5、使用代码块让编码意图更加清晰，降低修改代码时出错的几率。

6、变量的要注意的问题：用var操作符定义的变量将成为定义改变量的作用域中的局部变量。（也就是说，如果在函数中使用var定义了一个变量，那么这个变量在函数退出后就会被销毁）

7、数据类型：undifined boolean string number object function

8、undefined出现的原因：

（1）被来就没有定义

（2）定义了但是未赋值

9、number使用的是IEEE745格式来表示整数和小数，所以会出现，0.2+0.1不是0.3的问题。

10、NAN是一个特殊的数字类型的数值

11、强制类型转换：（1）Number （2）parseInt（3）parseFloat 隐式类型转换：== !!

12、null和undefined 没有toSting方法，所以就会放回这个两个值的字面量 null 和undefined

13、对象是一组数据和功能的集合，每个实例都具有属性和方法

（1）constructo：保存用于创建当前对象的函数

（2）hasOwnProperty：检查给定的属性在当前对象实例中是否存在。

（3）isPrototypeOf：检查传人的对象是否传人对象的原型。

（4）toLocalString：

（5）toString：返回对象的字符串

（6）valueOf：返回对象的字符串，数值，布尔值

14、break 终止循环,continue 跳过当前循环，继续执行下个循环 ###

第四章 变量、作用域、内存

1、基本类型（undefine null boolean number string）是按值访问，引用类型是按对象的引用访问

2、一个变量向另一个变量复制基本类型的值，会在变量上创建一个新值，然后把改值复制到为新变量分配的位置上。（复制）

3、当一个变量向另一个变量复制引用类型的值时，会将储存在变量对象中的值复制一份放到为变量分配的空间中，但是这个值的副本是一个指针，而这个指针指向储存在堆中的一个对象（快捷方式）

4、所有的函数参数都是按值传递的

5、执行环境定义了变量或函数有权访问其他数据，决定了他们各自的行为。

6、内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

7、查询标示符的过程：搜索过程从作用域的前端开始，向上足部查询与给定名字匹配的标识服。如果在局部环境中找到了改标示符，搜索过程停止，变量就绪。如果在局部环境中没有找到该变量名，则继续沿着作用域向上搜索。搜索过程将一直追溯到全局变量的变量对象。如果在全局环境中也没有找到这个标示符，则该变量未声明。

第五章 引用类型

1、可以使用点操作属性，也可以用方括号操作。但是方括号的优点是可以通过变量来访问属性，如果使用了关键字活保留字也可以用方括号

2、数组常用的方法：

（1）Push()尾部添加

（2）pop()尾部删除

（3）Unshift()头部添加

（4）shift()头部删除

（5）concat()连接

（6）join() 拆分

（7）sort() 排序

（8）reverse() 倒序

（9）splice() 混合（删除，插入，替换）

（10）indexOf() 查找索引位置

3、解析器在向执行环境中加载数据时，挤下去会率先读取函数声明，并使其在执行任何代码之前可以访问（函数声明提升）；但是函数表达式必须等到解析器执行到它所在的代码行，才会真正的被解析。

4、call和apply 设置函数体内的this指向。call接受的字符串，apply接受的是数组

5.字符串常用方法：

（1）charAt() 访问特定字符

（2）concat() 拼接

（3）substring 截取

（4）indexOf() 查找索引

（5）splice() 混合法（向数组中添加/删除项目）

（6）toLowerCase()

（7）toUpperCase()

第六章 面向对象

创建对象的方法：

1； 工厂模式

    fuction person(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name)
        }
        return o;
    }
    var p1 = person()

2；构造函数模式

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
            alert(this.name)
        }
    }
    p1 = new Person()

和工厂方式的区别：
（1） 没有显式的创建对象；
（2）直接将属性和方法赋给你了this对象；
（3）没有reutrn 语句
创建实例的步骤：
（1）创建一个对象；
（2）讲构造函数的作用域赋给新对象；
（3）执行构造函数中的代码；
（4）返回新对象

3；原型模式

    function Person() {};
    Person.prototype = {
        constructor: Person;
        nage = "bug";
        age: 19;
        job: "coder";
        sayName: function() {
            alert(this.name)
        }
    }
    var p1 = new Person()

原型模式的缺点：
（1）相同的属性值；
（2）实例被共享

4；组合模式

    funcition Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends: ['a', 'b'];
    }
    Person.prototype.sayName = function() {
        alert(this.name)
    }
    
    var p1=new Person()

5；动态原型模式

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        if (typeof this.sayName != "function") {
            Person.prototype.sayName = function() {
                alert(this.name)
            }
        }
    }
    var p1 = new Person()

6；寄生构造函数模式

    funcition Person(name,age,job){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.job=job;
        o.sayName=function(){
            alert(this.name
        }
        return o;
    }
    var p1= new Person()

7；稳妥构造函数模式

    function Person(name, age, job) {
        var o = new Object();
        o.sayName = function() {
            alert(name)
        }
        return o;
    }
    var p = Person()

对象的继承方式：

1；原型链继承

    function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function() {
        return this.property;
    }
    
    function subType() {
        this.subproperty = false;
    }
    SubType.prototype = new SuperType();
    
    SubType.prototype.getsubValue = function() {
        return this.subproperty;
    }
    
    var instance = new subType();

2；借用构造函数

    function SuperType() {
        this.colors = ["red", "blue", "green"];
    }
    
    function SubType() {
        SuperType.call(this)
    }
    var instance1 = new subType();

3；组合继承

    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
        alert(this.name)
    }
    
    function SubType(name, age) {
        SuperTyep.call(this, name)
        this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype = construtor = SubType;
    subTpye.prototype.sayAge = function() {
        alert(this.age)
    }
    var instance1 = new SubType('bug', 30)

4；原型式继承

    function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
    }

5；寄生式继承

    function creatAnother(original) {
        var clone = object(original);
        clone.sayHi = function() {
            alert("hi")
        }
        return clone;
    }

6；寄生组合式继承

    function SuperType(name) {
    
        this.name = name;
    
        this.colors = ["red", "blue", "green"];
    
    }
    
    SuperType.prototype.sayName = function() {
    
        alert(this.name);
    
    }
    
    function SubType(name, age) {
    
        SuperType.call(this, name); //第二次调用SuperType()
    
        this.age = age;
    
    }
    
    SubType.prototype = new SuperType(); //第一次调用SuperType()
    
    SubType.prototype.sayAge = function() {
    
        alert(this.age);
    
    }

第七章 函数表达式

1、 闭包：有权访问另一个函数作用域中的变量　

2、闭包与变量

function fun() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    return reslut
}

每个函数都返回10；

function fun() {
    var reslut = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function(num) {
            return function() {
                return num;
            }
        }(i)
    }
    return result;
}

返回1-10

3、this指向问题:

(1)在全局函数中，this等于window,
(2)作为对象的方法调用时，this等于那个对象。

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        return function() {
            return this.name
        }
    }
}

alert(object.getName()()) // window

var name = "window";
var object = {
    name: "object";
    getName：
    function() {
        var _this = this;
        return function() {
            return _this.name
        }
    }
}
alert(object.getName()()) // object

4.模仿块级作用域

(function(){
    
})()

第八章 BOM

IE: trident内核
Firefox：gecko内核
Chrome:Blink内核

1、location 对象
2、navigator 对象
3、history 对象

第十章 DOM

appendChild 添加
inserBefore 插入
replaceChild 替换
removeChild 删除

第十一章 DOM 扩展

1、querySelector()
2、querySelectorAll()
3、getElementsByClassName()
4.classList 属性
（1）add()
（2）contains()
（3）remove()
（4）toggle()
5、children 属性

第二十一章 ajax

ajax：页面无刷新请求操作

1、ajax步骤：

（1） 启动

（2） 发送

（3） 接收

（4） 完成

get 用于想服务器查询信息
post 用于向服务器发送信息

2、CORS 跨云资源共享

跨浏览器的 CORS

function CORS(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true)
    } else if (typeof XDomainRequset != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url)
    } else {
        xhr = null;
    }
    reutrn xhr;
}
var req = CORS("get", "wwww")

3、jsonp 跨域

定义：动态创建script标签，回调函数